<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="../../build/common/base.css" rel="stylesheet">
  <link rel="stylesheet" href="../../build/form/page.css">
  <script type="text/javascript" src="../../build/common/base.js"></script>
  <script type="text/javascript" src="../../build/common/vueEdit.js"></script>
  <link rel="stylesheet" href="../../assets/js/common/element/index.css">
  <script src="../../assets/js/common/element/index.js"></script>
  <style>
    * {
      padding: 0px;
      margin: 0px;
    }

    ul li {
      list-style: none;
    }

    .my_cols {
      margin: 20px 0;
    }

    .el-tabs__new-tab {
      margin-right: 12px;
      float: left;
    }

    .table_2 {
      width: 70%;
      overflow: auto
    }

    .table_2 table {
      /* width: 80%; */
    }

    .table_2 table th,
    .table_2 table td {
      white-space: nowrap;
    }

    .table_1 {
      width: 30%;
    }

    .add_table {
      display: flex;
      align-items: center;
    }

    .my_add {}

    .my_mb {
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <div id="ctrlC" style="padding: 30px;">
    <div class="my_mb">
      <span @click="handCol()" class="btn btn-success mb30 mr15">返回</span>
      <span @click="handSub()" class="btn btn-success mb30">提交</span>
    </div>



    <el-tabs v-model="editableTabsValue" type="border-card" editable @edit="handleTabsEdit">
      <el-tab-pane :key="item.build_id" v-for="(item, index) in newedit" :label="item.build_name" :name="item.build_id">
        <div style="display: flex;">
          <table class="table_1 my_table table table-striped table-bordered table_hover text-center mb60">
            <tbody>
              <tr>
                <th style="height: 50px;">产品选择</th>
              </tr>
              <tr>
                <td>
                  <more-cascader :items="item" @changings="showDialogs" ref="headerChild" :newjl="item.father_id">
                  </more-cascader>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="table_2" style="display: flex;">
            <table style=" margin-right: 20px;" v-for="items in item.veSubClasses" :key="items.subclass_id"
              class="my_table table table-striped table-bordered table_hover text-center mb60" v-if="items.subclass_id">
              <tbody>
                <tr>
                  <td colspan="2" style="height: 50px;">
                    <div class="add_table">
                      <more-cascader @changing="showDialog" :items="items" :newjl="items.material_coding">
                      </more-cascader>
                      <span @click="handDel(items.subclass_id)" class="btn btn-success mb30"
                        style="margin-left: 5px;">删除</span>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    备注
                  </td>
                  <td>
                    <input v-model="items.subclass_note" class="form-control ab-valid" type="text">
                  </td>
                </tr>
                <tr>
                  <td>
                    品牌
                  </td>
                  <td>
                    <input v-model="items.subclass_brand" class="form-control ab-valid" type="text">
                  </td>
                </tr>
                <tr>
                  <td>
                    型号
                  </td>
                  <td>
                    <input v-model="items.subclass_model" class="form-control ab-valid" type="text">
                  </td>
                </tr>
                <tr>
                  <td>
                    主要技术参数
                  </td>
                  <td>
                    <table class="my_table table table-striped table-bordered table_hover text-center mb60">
                      <tr>
                        <td>参数名</td>
                        <td>参数值</td>
                      </tr>
                      <tr v-for="childitem in items.subclass_parameter">
                        <td>
                          <input v-model="childitem.csm" class="form-control ab-valid" type="text">
                        </td>
                        <td>
                          <input v-model="childitem.csz" class="form-control ab-valid" type="text">
                        </td>
                      </tr>
                    </table>




                    <!-- <div style="display: flex;" v-for="childitem in items.subclass_parameter">
                      <div>
                        参数名 : <input v-model="childitem.csm" class="form-control ab-valid" type="text">
                      </div>
                      <div>
                        参数值 : <input v-model="childitem.csz" class="form-control ab-valid" type="text">
                      </div>
                    </div> -->

                  </td>
                </tr>

              </tbody>
            </table>
            <div>
              <span @click="handAdd(item.build_id)" class="btn btn-success my_add">添加</span>
            </div>

          </div>

        </div>

      </el-tab-pane>
    </el-tabs>


  </div>
</body>
<div id="ceshi"></div>
<script type="text/javascript">


  var vm = new Vue({
    el: "#ctrlC",
    data: function () {
      return {
        veList: [],
        editableTabsValue: '1',
        newEdit: [],
        editableTabs: [
          //   {
          //   title: 'Tab 1',
          //   name: '1',
          //   content: 'Tab 1 content'
          // }, {
          //   title: 'Tab 2',
          //   name: '2',
          //   content: 'Tab 2 content'
          // }
        ],
        coding: [],
        fatherid: [],
        tabIndex: 2
      }
    },
    beforeCreate: function () {
    },
    created: function () {
      var that = this
      var url = Vue.__ctx + "/sys/BuildMaterials/findlist";
      var post = Vue.baseService.get(url);
      post.then(function (res) {
        that.editableTabs = res
      }, function (status) {
        if (status == !0) {
          $.Toast.error('加载失败！' + status);
        }
      })

    },
    computed: {
      newedit: function () {
        var that = this
        for (let i = 0; i < that.editableTabs.length; i++) {
          if (that.editableTabs[i].veSubClasses) {
            for (let k = 0; k < that.editableTabs[i].veSubClasses.length; k++) {
              try {
                that.editableTabs[i].veSubClasses[k].subclass_parameter = JSON.parse(that.editableTabs[i].veSubClasses[k].subclass_parameter)

              } catch (err) {
                // that.editableTabs[i].veSubClasses[k].subclass_parameter = ""
                // console.log(err)
              }
            }
          }

        }
        return this.editableTabs
      }
    },
    methods: {
      showDialogs: function (data, items) {
        var that = this
        var url = __ctx + "/sys/matecode/findMatecode/" + data[data.length - 1]
        var post = Vue.baseService.get(url);
        post.then(function (data) {
          console.log("data", data)
          items.build_name = data.cname
        }, function (status) {
          if (status == !0) {
            layer.close(loading)
            $.Toast.error('加载失败！' + status);
          }
        })
        // var cas = this.$refs.headerChild[0].inpuVl.inputValue.split(" / ")
        // items.build_name = cas[cas.length - 1]
        // console.log("修改名字2", cas[cas.length - 1])
        // this.$forceUpdate()
      },
      showDialog: function (data, items) {
        var wlbm = ""
        var that = this
        if (data) {
          wlbm = data[data.length - 1]
        }

        var url = __ctx + "/sys/aclclb/ids/" + wlbm
        var post = Vue.baseService.get(url);
        post.then(function (res) {
          items.material_coding = data[data.length - 1]
          try {
            items.subclass_parameter = items.subclass_parameter.split("")
          } catch (err) {

          }
          // if (typeof items.subclass_parameter != Object) {

          // }
          items.subclass_parameter = res.clcsbs
          items.subclass_brand = res.pp
          items.subclass_model = res.cpxh

          // that.init()
          that.$forceUpdate()
        }, function (status) {
          if (status == !0) {
            layer.close(loading)
            $.Toast.error('加载失败！' + status);
          }
        })
        this.$forceUpdate()
      },
      handDel(id) {
        for (var i = 0; i < this.editableTabs.length; i++) {

          for (var k = 0; k < this.editableTabs[i].veSubClasses.length; k++) {
            console.log("sdsadas", this.editableTabs[i].veSubClasses[k].subclass_id)
            if (!this.editableTabs[i].veSubClasses[k].subclass_id) {
              this.editableTabs[i].veSubClasses[k] = []
            }
          }
        }
        var that = this
        console.log("haiyou ma ", that.editableTabs)
        console.log("idd", id)
        var url = Vue.__ctx + "/sys/VeSubClass/deletes/" + id;
        var post = Vue.baseService.get(url);
        post.then(function (res) {
          console.log("haiyou ma ", that.editableTabs)
          that.init()
          that.$forceUpdate()
          $.Toast.success('删除成功');
        }, function (status) {
          if (status == !0) {
            $.Toast.error('加载失败！' + status);
          }
        })
      },
      init() {
        var that = this
        var url = Vue.__ctx + "/sys/BuildMaterials/findlist";
        var post = Vue.baseService.get(url);
        post.then(function (res) {
          that.editableTabs = res
        }, function (status) {
          if (status == !0) {
            $.Toast.error('加载失败！' + status);
          }
        })
      },
      handAdd(id) {
        var that = this

        const pro = new Promise(function (resolve, reject) {
          var edit = that.editableTabs
          var url = Vue.__ctx + "/sys/BuildMaterials/updates";
          var post = Vue.baseService.post(url, { buildMaterials: edit });
          post.then(function (data) {
            resolve(data)
          }, function (status) {
            if (status == !0) {
              layer.close(loading)
              $.Toast.error('加载失败！' + status);
            }
          })

        }).then(function (data) {
          // if (data == "提交成功") {
          var url = Vue.__ctx + "/sys/VeSubClass/saves/" + id;
          var post = Vue.baseService.post(url);
          post.then(function (res) {
            $.Toast.success('添加成功');
            that.init()
            // that.$forceUpdate()
          }, function (status) {
            if (status == !0) {
              $.Toast.error('加载失败！' + status);
            }
          })
          // }
        })

        // var edit = this.editableTabs
        // var url = Vue.__ctx + "/sys/BuildMaterials/updates";
        // var post = Vue.baseService.post(url, { buildMaterials: edit });
        // post.then(function (data) {
        //   $.Toast.success('添加然后,提交成功');
        // }, function (status) {
        //   if (status == !0) {
        //     layer.close(loading)
        //     $.Toast.error('加载失败！' + status);
        //   }
        // })


        // var url = Vue.__ctx + "/sys/VeSubClass/saves/" + id;
        // var post = Vue.baseService.post(url);
        // post.then(function (res) {
        //   $.Toast.success('添加成功');
        //   that.init()
        //   // that.$forceUpdate()
        // }, function (status) {
        //   if (status == !0) {
        //     $.Toast.error('加载失败！' + status);
        //   }
        // })





      },
      handleTabsEdit(targetName, action) {
        // console.log("sssssadad", this.$refs['myCascader'])
        if (action === 'add') {
          var that = this
          var url = Vue.__ctx + "/sys/BuildMaterials/saves";
          var post = Vue.baseService.post(url);
          post.then(function (res) {
            console.log("大类", that.editableTabs)
            that.init()
            that.$forceUpdate()
          }, function (status) {
            if (status == !0) {
              $.Toast.error('加载失败！' + status);
            }
          })
          // let newTabName = ++this.tabIndex + '';
          // this.editableTabs.push({
          //   title: 'New Tab',
          //   name: newTabName,
          //   content: 'New Tab content'
          // });
          // this.editableTabsValue = newTabName;
        }
        if (action === 'remove') {
          var that = this
          var url = __ctx + "/sys/BuildMaterials/deletes/" + targetName
          var post = Vue.baseService.get(url);
          post.then(function (data) {
            that.init()
            $.Toast.success('删除成功');
            console.log("data", data)
          }, function (status) {
            if (status == !0) {
              layer.close(loading)
              $.Toast.error('加载失败！' + status);
            }
          })
          // let tabs = this.editableTabs;
          // let activeName = this.editableTabsValue;
          // if (activeName === targetName) {
          //   tabs.forEach((tab, index) => {
          //     if (tab.name === targetName) {
          //       let nextTab = tabs[index + 1] || tabs[index - 1];
          //       if (nextTab) {
          //         activeName = nextTab.name;
          //       }
          //     }
          //   });
          // }
          // this.editableTabsValue = activeName;
          // this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        }
      },
      handCol: function () {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
        parent.layer.close(index);
      },
      handSub: function () {
        var that = this
        // for (let i = 0; i < that.editableTabs.length; i++) {
        //   if (that.editableTabs[i].veSubClasses) {
        //     for (let k = 0; k < that.editableTabs[i].veSubClasses.length; k++) {
        //       if (that.editableTabs[i].veSubClasses[k].subclass_parameter) {
        //         that.editableTabs[i].veSubClasses[k].subclass_parameter = ""
        //       }
        //       // that.editableTabs[i].veSubClasses[k].subclass_parameter = ""

        //     }
        //   }

        // }
        console.log("请求参数", this.editableTabs)
        // console.log("请求参数", JSON.parse(this.editableTabs))
        var edit = this.editableTabs
        var url = Vue.__ctx + "/sys/BuildMaterials/updates";
        var post = Vue.baseService.post(url, { buildMaterials: edit });
        post.then(function (data) {
          $.Toast.success('提交成功');
          var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
          parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
          parent.layer.close(index);
        }, function (status) {
          if (status == !0) {
            layer.close(loading)
            $.Toast.error('加载失败！' + status);
          }
        })

        // var post = Vue.baseService.post(url, {
        //   buildMaterials: edit
        // });
        // $.getResultData(post, function (data) {
        //   $.Toast.success('提交成功');
        //   console.log("data", data)
        // });
        // $.ajax({
        //   url: url,
        //   type: "post",
        //   dataType: "json",
        //   contentType: 'application/json;charset=UTF-8',
        //   // traditional: true,
        //   data: { buildMaterials: edit },
        //   success: function (res) {
        //     // var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        //     // parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
        //     // parent.layer.close(index);
        //     console.log("成功", res)
        //   }
        // })
      }

    },

    watch: {

    }
  });
</script>

</html>